import React, { useEffect, useState } from 'react'
import { Table, Button, Modal, message, Popconfirm } from 'antd';
import { ToolOutlined, DeleteOutlined } from '@ant-design/icons'
import NewRole from '../../components/StaffManage/RolePermission/NewRole';
import '../../assets/css/DepartmentSettings.css'
import UpdateRole from '../../components/StaffManage/RolePermission/UpdateRole';
import { inject, observer } from 'mobx-react'
import Service from '../../service';

function RolePermissions(props) {
    const [isAddModalVisible, setisAddModalVisible] = useState(false);
    const [isUpdateModalVisible, setisUpdateModalVisible] = useState(false);
    const [currentInfo, setCurrentInfo] = useState('')
    const [currentRole, setCurrentRole] = useState([])
    const showModal = async (data) => {
        console.log(data);
        switch (data.state) {
            case 'add':
                setisAddModalVisible(true);
                break;
            case 'update':
                setCurrentInfo(data.record)
                const result = await Service.StaffManage.RolePermission.getRoleById({ role_id: data.record.role_id })
                console.log(result);
                if (result.code === 200) {
                    const arr = []
                    result.data.forEach(item => arr.push(item.id))
                    setCurrentRole(arr)
                    setisUpdateModalVisible(true);
                }

                break;
            default:
                break;
        }
    };

    const handleOk = async (data) => {
        switch (data) {
            case 'add':
                const params = { role_title: props.departmentSettingsStore.title, menu_ids: props.departmentSettingsStore.newMenu_id.slice() }

                const result = await Service.StaffManage.RolePermission.addList(params)
                if (result.code === 200) { message.success('新增成功') }
                props.departmentSettingsStore.setTitle('')
                props.departmentSettingsStore.setNewMenu_id([])
                getData()
                setisAddModalVisible(false);
                break;
            case 'update':
                const params1 = { role_id: currentInfo.role_id, role_title: props.departmentSettingsStore.upTitle, menu_ids: props.departmentSettingsStore.upMenu_id }
                const res = await Service.StaffManage.RolePermission.upList(params1)
                if (res.code === 200) { message.success('修改成功') }
                getData()
                setisUpdateModalVisible(false);
                break;
            default:
                break;
        }
    };

    const handleCancel = (data) => {
        switch (data) {
            case 'add':
                setisAddModalVisible(false);
                break;
            case 'update':
                setisUpdateModalVisible(false);
                break;
            default:
                break;
        }
    };
    const delRolePermission = (record) => {
        console.log(record);
    };

    const confirm = async (text) => {
        const result = await Service.StaffManage.RolePermission.delList({ role_id: text })
        if (result.code === 200) { message.success('删除成功'); }
        getData()

    };

    const cancel = (e) => {
        message.error('取消删除');
    };
    const columns = [
        {
            title: <strong>角色名称</strong>,
            dataIndex: 'role_title',
            key: 'key',
            width: 2400,
            render: (text) => <a >{text}</a>,
        },
        {
            title: <strong>管理</strong>,
            // onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            dataIndex: 'key',
            key: 'key',
            align: 'center',
            render: (text, record) => {
                if (text === 1) {
                    return <div>超级管理员</div>
                } else {
                    return <div style={{ minWidth: '150px' }}>
                        <Button onClick={() => showModal({ state: 'update', record })} style={{ backgroundColor: '#5596cd', color: 'white' }} size='small'  ><ToolOutlined /> 修改</Button>
                        <Popconfirm
                            title={`确定删除${record.role_title}吗?`}
                            onConfirm={() => confirm(text)}
                            onCancel={cancel}
                            okText="是"
                            cancelText="否"

                        >
                            <Button onClick={() => delRolePermission(record)} style={{ backgroundColor: '#f52e31', color: 'white' }} size='small'><DeleteOutlined />删除</Button>
                        </Popconfirm>
                    </div>

                }


            }

        },
    ];
    const [data, setData] = useState([])
    useEffect(() => {
        getData()
    }, [])
    const getData = async () => {
        const result = await Service.StaffManage.RolePermission.freshList()
        console.log(result);
        setData(result.data.map((item) => {
            item.key = item.role_id;
            return item;
        }))
    }

    return (
        <div>
            <div className='depart_up'>
                <Button onClick={getData}>所有权限</Button>
                <Button onClick={(e) => showModal({ state: 'add', e })}>新增权限值</Button>
            </div>
            <Modal okText="保存" cancelText="取消" title="新增权限信息" visible={isAddModalVisible} onOk={() => handleOk('add')} onCancel={() => handleCancel('add')}>
                <NewRole />
            </Modal>
            <Modal okText="保存" cancelText="取消" title="修改权限信息" visible={isUpdateModalVisible} onOk={() => handleOk('update')} onCancel={() => handleCancel('update')}>
                <UpdateRole currentInfo={currentInfo} currentRole={currentRole} />
            </Modal>
            <Table pagination={false} bordered={true} columns={columns} dataSource={data} className="depart_table" />
        </div>
    )
}

export default inject('departmentSettingsStore')(observer(RolePermissions))

